---
category: Level 1 — Basic
contributors:
    - aldi
created: '2020-02-17'
keywords: addEventListener, attach event handler, detach event handler, removeEventListener
title: Attach or detach an event handler
updated: '2020-06-18'
---

## Use the on attribute (not recommended)

You can set the event handler via the `on{eventName}` attribute, where `eventName` represents the name of event.
For example:

```js
ele.onclick = function() {
    ...
};

// Remove the event handler
delete ele.onclick;
```

This approach isn't recommended because we can only attach one handler for each event. Setting the `onclick` attribute, for example, will override any existing handler for the `click` event.

## Use the addEventListener method

```js
const handler = function() {
    ...
};

// Attach handler to the `click` event
ele.addEventListener('click', handler);

// Detach the handler from the `click` event
ele.removeEventListener('click', handler);
```

Note that the event name is passed as the first parameter in both the `addEventListener` and `removeEventListener` methods.
It differs from the first approach which requires to prefix the event name with `on`.

If you want the handler to be invoke once, then look at the [Create one time event handler](https://phuoc.ng/collection/html-dom/create-one-time-event-handler/) post.

## See also

-   [Allow to enter particular characters only](https://phuoc.ng/collection/html-dom/allow-to-enter-particular-characters-only/)
-   [Attach event handlers inside other handlers](https://phuoc.ng/collection/html-dom/attach-event-handlers-inside-other-handlers/)
-   [Calculate the mouse position relative to an element](https://phuoc.ng/collection/html-dom/calculate-the-mouse-position-relative-to-an-element/)
-   [Communication between an iframe and its parent window](https://phuoc.ng/collection/html-dom/communication-between-an-iframe-and-its-parent-window/)
-   [Copy highlighted code to the clipboard](https://phuoc.ng/collection/html-dom/copy-highlighted-code-to-the-clipboard/)
-   [Count the number of characters of a textarea](https://phuoc.ng/collection/html-dom/count-the-number-of-characters-of-a-textarea/)
-   [Create a custom scrollbar](https://phuoc.ng/collection/html-dom/create-a-custom-scrollbar/)
-   [Create a range slider](https://phuoc.ng/collection/html-dom/create-a-range-slider/)
-   [Create an image comparison slider](https://phuoc.ng/collection/html-dom/create-an-image-comparison-slider/)
-   [Create resizable split views](https://phuoc.ng/collection/html-dom/create-resizable-split-views/)
-   [Detect if the caps lock is on](https://phuoc.ng/collection/html-dom/detect-if-the-caps-lock-is-on/)
-   [Distinguish between left and right mouse clicks](https://phuoc.ng/collection/html-dom/distinguish-between-left-and-right-mouse-clicks/)
-   [Drag and drop element in a list](https://phuoc.ng/collection/html-dom/drag-and-drop-element-in-a-list/)
-   [Drag and drop table column](https://phuoc.ng/collection/html-dom/drag-and-drop-table-column/)
-   [Drag and drop table row](https://phuoc.ng/collection/html-dom/drag-and-drop-table-row/)
-   [Drag to scroll](https://phuoc.ng/collection/html-dom/drag-to-scroll/)
-   [Export a table to csv](https://phuoc.ng/collection/html-dom/export-a-table-to-csv/)
-   [Get size of the selected file](https://phuoc.ng/collection/html-dom/get-size-of-the-selected-file/)
-   [Get the size of an image](https://phuoc.ng/collection/html-dom/get-the-size-of-an-image/)
-   [Highlight an element when dragging a file over it](https://phuoc.ng/collection/html-dom/highlight-an-element-when-dragging-a-file-over-it/)
-   [Make a draggable element](https://phuoc.ng/collection/html-dom/make-a-draggable-element/)
-   [Make a resizable element](https://phuoc.ng/collection/html-dom/make-a-resizable-element/)
-   [Paste as plain text](https://phuoc.ng/collection/html-dom/paste-as-plain-text/)
-   [Placeholder for a contenteditable element](https://phuoc.ng/collection/html-dom/placeholder-for-a-contenteditable-element/)
-   [Press shift and enter for a new line](https://phuoc.ng/collection/html-dom/press-shift-and-enter-for-a-new-line/)
-   [Prevent the default action of an event](https://phuoc.ng/collection/html-dom/prevent-the-default-action-of-an-event/)
-   [Print an image](https://phuoc.ng/collection/html-dom/print-an-image/)
-   [Replace broken images](https://phuoc.ng/collection/html-dom/replace-broken-images/)
-   [Resize an iframe to fit its content](https://phuoc.ng/collection/html-dom/resize-an-iframe-to-fit-its-content/)
-   [Resize an image](https://phuoc.ng/collection/html-dom/resize-an-image/)
-   [Resize columns of a table](https://phuoc.ng/collection/html-dom/resize-columns-of-a-table/)
-   [Resize the width of a text box to fit its content automatically](https://phuoc.ng/collection/html-dom/resize-the-width-of-a-text-box-to-fit-its-content-automatically/)
-   [Select the text of a textarea automatically](https://phuoc.ng/collection/html-dom/select-the-text-of-a-textarea-automatically/)
-   [Show a custom context menu at clicked position](https://phuoc.ng/collection/html-dom/show-a-custom-context-menu-at-clicked-position/)
-   [Show a ghost element when dragging an element](https://phuoc.ng/collection/html-dom/show-a-ghost-element-when-dragging-an-element/)
-   [Show a loading indicator when an iframe is being loaded](https://phuoc.ng/collection/html-dom/show-a-loading-indicator-when-an-iframe-is-being-loaded/)
-   [Show or hide table columns](https://phuoc.ng/collection/html-dom/show-or-hide-table-columns/)
-   [Sort a table by clicking its headers](https://phuoc.ng/collection/html-dom/sort-a-table-by-clicking-its-headers/)
-   [Zoom an image](https://phuoc.ng/collection/html-dom/zoom-an-image/)
